@os-design/core 1.0.131 → 1.0.132

package/dist/cjs/Input/index.js

@@ -23,7 +23,7 @@ var _icons = require("@os-design/icons");
 
 var _getFocusableElements = _interopRequireDefault(require("./utils/getFocusableElements"));
 
-var _excluded = ["type", "left", "leftHasPadding", "right", "rightHasPadding", "disabled", "loading", "containerRef", "containerProps", "size", "onChange"];
+var _excluded = ["type", "left", "leftHasPadding", "right", "rightHasPadding", "disabled", "loading", "containerRef", "containerProps", "size", "value", "onChange"];
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
 
@@ -126,6 +126,7 @@ var Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       _ref$containerProps = _ref.containerProps,
       containerProps = _ref$containerProps === void 0 ? {} : _ref$containerProps,
       size = _ref.size,
+      value = _ref.value,
       _ref$onChange = _ref.onChange,
       _onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
       rest = _objectWithoutProperties(_ref, _excluded);
@@ -180,6 +181,7 @@ var Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     disabled: disabled,
     hasLeft: !!left,
     hasRight: !!right,
+    value: value || '',
     onChange: function onChange(e) {
       return _onChange(e.target.value, e);
     }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Input/index.tsx"],"names":["hoverStyles","p","disabled","css","theme","inputHoverColorBorder","focusStyles","inputFocusColorBorder","inputFocusColorShadow","disabledStyles","inputDisabledColorText","inputDisabledColorBg","inputDisabledColorBorder","inputDisabledColorPlaceholder","InputContainer","resetFocusStyles","baseHeight","inputColorBg","inputBorderWidth","inputColorBorder","borderRadius","sizeStyles","notHasLeftStyles","hasLeft","inputPaddingHorizontal","notHasRightStyles","hasRight","StyledInput","inputColorText","inputColorPlaceholder","Addon","LeftAddon","inputAddonPaddingHorizontal","hasPadding","RightAddon","Input","ref","type","left","leftHasPadding","right","rightHasPadding","loading","containerRef","containerProps","size","onChange","rest","innerContainerRef","mergedContainerRef","rightValue","rightHasPaddingValue","e","target","current","focusableElements","focus","document","inputFocusableElements","firstInputElementIsFocused","activeElement","key","shiftKey","inputContainerIndex","findIndex","el","elementBeforeInputContainer","buttonPaddingHorizontal","value","displayName"],"mappings":"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","sourcesContent":["import React, { ChangeEvent, ForwardedRef, forwardRef, useMemo } from 'react';\nimport {\n  resetFocusStyles,\n  sizeStyles,\n  transitionStyles,\n  WithSize,\n} from '@os-design/styles';\nimport { omitEmotionProps, useForwardedRef } from '@os-design/utils';\nimport styled from '@emotion/styled';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport { css } from '@emotion/react';\nimport { Loading } from '@os-design/icons';\nimport getFocusableElements from './utils/getFocusableElements';\n\ntype JsxInputProps = Omit<\n  JSX.IntrinsicElements['input'],\n  'value' | 'onChange' | 'size' | 'ref'\n>;\nexport interface InputProps extends JsxInputProps, WithSize {\n  /**\n   * Type of the input.\n   * @default text\n   */\n  type?: JsxInputProps['type'];\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   * Whether the input is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Shows the loading status.\n   * @default false\n   */\n  loading?: boolean;\n  /**\n   * The ref of the input container.\n   * @default undefined\n   */\n  containerRef?: ForwardedRef<HTMLDivElement>;\n  /**\n   * The props of the input container.\n   * @default undefined\n   */\n  containerProps?: JSX.IntrinsicElements['div'];\n  /**\n   * The input value.\n   * @default undefined\n   */\n  value?: string;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: string, e: ChangeEvent<HTMLInputElement>) => void;\n}\n\nconst hoverStyles = (p) =>\n  !p.disabled &&\n  css`\n    @media (hover: hover) {\n      &:hover {\n        border-color: ${clr(p.theme.inputHoverColorBorder)};\n      }\n    }\n  `;\n\nconst focusStyles = (p) =>\n  !p.disabled &&\n  css`\n    &:focus-within {\n      border-color: ${clr(p.theme.inputFocusColorBorder)};\n      box-shadow: 0 0 0 0.15em ${clr(p.theme.inputFocusColorShadow)};\n    }\n  `;\n\nconst disabledStyles = (p) =>\n  p.disabled &&\n  css`\n    cursor: not-allowed;\n    color: ${clr(p.theme.inputDisabledColorText)};\n    background-color: ${clr(p.theme.inputDisabledColorBg)};\n    border-color: ${clr(p.theme.inputDisabledColorBorder)};\n\n    input,\n    textarea {\n      cursor: not-allowed;\n      &::placeholder {\n        color: ${clr(p.theme.inputDisabledColorPlaceholder)};\n      }\n    }\n  `;\n\ntype InputContainerProps = Pick<InputProps, 'disabled' | 'size'>;\nexport const InputContainer = styled(\n  'div',\n  omitEmotionProps('disabled', 'size')\n)<InputContainerProps>`\n  ${resetFocusStyles};\n\n  display: inline-flex;\n  width: 100%;\n  height: ${(p) => p.theme.baseHeight}em;\n  box-sizing: border-box;\n  background-color: ${(p) => clr(p.theme.inputColorBg)};\n\n  border: ${(p) => p.theme.inputBorderWidth}px solid\n    ${(p) => clr(p.theme.inputColorBorder)};\n  border-radius: ${(p) => p.theme.borderRadius}em;\n\n  ${hoverStyles};\n  ${focusStyles};\n  ${disabledStyles};\n  ${sizeStyles};\n  ${transitionStyles('border-color', 'box-shadow')};\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 StyledInputProps {\n  hasLeft?: boolean;\n  hasRight?: boolean;\n}\nexport const StyledInput = styled(\n  'input',\n  omitEmotionProps('hasLeft', 'hasRight')\n)<StyledInputProps>`\n  ${resetFocusStyles};\n  appearance: none;\n  border: none;\n  font-size: 1em;\n  flex: 1;\n  overflow: hidden;\n\n  color: ${(p) => clr(p.theme.inputColorText)};\n  background-color: transparent;\n\n  &::placeholder {\n    color: ${(p) => clr(p.theme.inputColorPlaceholder)};\n  }\n\n  ${notHasLeftStyles};\n  ${notHasRightStyles};\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\nconst 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\nconst 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\n/**\n * The basic input component.\n */\nconst Input = forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      type = 'text',\n      left,\n      leftHasPadding = false,\n      right,\n      rightHasPadding = false,\n      disabled = false,\n      loading = false,\n      containerRef,\n      containerProps = {},\n      size,\n      onChange = () => {},\n      ...rest\n    },\n    ref\n  ) => {\n    const [innerContainerRef, mergedContainerRef] =\n      useForwardedRef(containerRef);\n\n    const rightValue = useMemo(\n      () => (loading ? <Loading /> : right),\n      [loading, right]\n    );\n\n    const rightHasPaddingValue = useMemo(\n      () => (loading ? true : rightHasPadding),\n      [loading, rightHasPadding]\n    );\n\n    return (\n      <InputContainer\n        disabled={disabled}\n        size={size}\n        tabIndex={!disabled ? 0 : -1}\n        onFocus={(e) => {\n          // Focus the next element if the container element was focused.\n          // The next element will be the input or button in the addon.\n          if (disabled || e.target !== innerContainerRef.current) return;\n          const focusableElements = getFocusableElements(\n            innerContainerRef.current\n          );\n          focusableElements[0].focus();\n        }}\n        onKeyDown={(e) => {\n          // Focus the previous element if the first element in the input\n          // container is focused and the Shift + Tab combination is pressed.\n          const focusableElements = getFocusableElements(document);\n          const inputFocusableElements = innerContainerRef.current\n            ? getFocusableElements(innerContainerRef.current)\n            : [];\n          const firstInputElementIsFocused =\n            inputFocusableElements[0] === document.activeElement;\n          if (firstInputElementIsFocused && e.key === 'Tab' && e.shiftKey) {\n            const inputContainerIndex = focusableElements.findIndex(\n              (el) => el === innerContainerRef.current\n            );\n            if (inputContainerIndex === 0) return;\n            const elementBeforeInputContainer =\n              focusableElements[inputContainerIndex - 1];\n            elementBeforeInputContainer.focus();\n          }\n        }}\n        ref={mergedContainerRef}\n        {...containerProps}\n      >\n        {left && (\n          <ThemeOverrider overrides={{ buttonPaddingHorizontal: 0.8 }}>\n            <LeftAddon hasPadding={leftHasPadding}>{left}</LeftAddon>\n          </ThemeOverrider>\n        )}\n\n        <StyledInput\n          type={type}\n          disabled={disabled}\n          hasLeft={!!left}\n          hasRight={!!right}\n          onChange={(e) => onChange(e.target.value, e)}\n          {...rest}\n          ref={ref}\n        />\n\n        {rightValue && (\n          <ThemeOverrider overrides={{ buttonPaddingHorizontal: 0.8 }}>\n            <RightAddon hasPadding={rightHasPaddingValue}>\n              {rightValue}\n            </RightAddon>\n          </ThemeOverrider>\n        )}\n      </InputContainer>\n    );\n  }\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/Input/index.tsx"],"names":["hoverStyles","p","disabled","css","theme","inputHoverColorBorder","focusStyles","inputFocusColorBorder","inputFocusColorShadow","disabledStyles","inputDisabledColorText","inputDisabledColorBg","inputDisabledColorBorder","inputDisabledColorPlaceholder","InputContainer","resetFocusStyles","baseHeight","inputColorBg","inputBorderWidth","inputColorBorder","borderRadius","sizeStyles","notHasLeftStyles","hasLeft","inputPaddingHorizontal","notHasRightStyles","hasRight","StyledInput","inputColorText","inputColorPlaceholder","Addon","LeftAddon","inputAddonPaddingHorizontal","hasPadding","RightAddon","Input","ref","type","left","leftHasPadding","right","rightHasPadding","loading","containerRef","containerProps","size","value","onChange","rest","innerContainerRef","mergedContainerRef","rightValue","rightHasPaddingValue","e","target","current","focusableElements","focus","document","inputFocusableElements","firstInputElementIsFocused","activeElement","key","shiftKey","inputContainerIndex","findIndex","el","elementBeforeInputContainer","buttonPaddingHorizontal","displayName"],"mappings":"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","sourcesContent":["import React, { ChangeEvent, ForwardedRef, forwardRef, useMemo } from 'react';\nimport {\n  resetFocusStyles,\n  sizeStyles,\n  transitionStyles,\n  WithSize,\n} from '@os-design/styles';\nimport { omitEmotionProps, useForwardedRef } from '@os-design/utils';\nimport styled from '@emotion/styled';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport { css } from '@emotion/react';\nimport { Loading } from '@os-design/icons';\nimport getFocusableElements from './utils/getFocusableElements';\n\ntype JsxInputProps = Omit<\n  JSX.IntrinsicElements['input'],\n  'value' | 'onChange' | 'size' | 'ref'\n>;\nexport interface InputProps extends JsxInputProps, WithSize {\n  /**\n   * Type of the input.\n   * @default text\n   */\n  type?: JsxInputProps['type'];\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   * Whether the input is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Shows the loading status.\n   * @default false\n   */\n  loading?: boolean;\n  /**\n   * The ref of the input container.\n   * @default undefined\n   */\n  containerRef?: ForwardedRef<HTMLDivElement>;\n  /**\n   * The props of the input container.\n   * @default undefined\n   */\n  containerProps?: JSX.IntrinsicElements['div'];\n  /**\n   * The input value.\n   * @default undefined\n   */\n  value?: string;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: string, e: ChangeEvent<HTMLInputElement>) => void;\n}\n\nconst hoverStyles = (p) =>\n  !p.disabled &&\n  css`\n    @media (hover: hover) {\n      &:hover {\n        border-color: ${clr(p.theme.inputHoverColorBorder)};\n      }\n    }\n  `;\n\nconst focusStyles = (p) =>\n  !p.disabled &&\n  css`\n    &:focus-within {\n      border-color: ${clr(p.theme.inputFocusColorBorder)};\n      box-shadow: 0 0 0 0.15em ${clr(p.theme.inputFocusColorShadow)};\n    }\n  `;\n\nconst disabledStyles = (p) =>\n  p.disabled &&\n  css`\n    cursor: not-allowed;\n    color: ${clr(p.theme.inputDisabledColorText)};\n    background-color: ${clr(p.theme.inputDisabledColorBg)};\n    border-color: ${clr(p.theme.inputDisabledColorBorder)};\n\n    input,\n    textarea {\n      cursor: not-allowed;\n      &::placeholder {\n        color: ${clr(p.theme.inputDisabledColorPlaceholder)};\n      }\n    }\n  `;\n\ntype InputContainerProps = Pick<InputProps, 'disabled' | 'size'>;\nexport const InputContainer = styled(\n  'div',\n  omitEmotionProps('disabled', 'size')\n)<InputContainerProps>`\n  ${resetFocusStyles};\n\n  display: inline-flex;\n  width: 100%;\n  height: ${(p) => p.theme.baseHeight}em;\n  box-sizing: border-box;\n  background-color: ${(p) => clr(p.theme.inputColorBg)};\n\n  border: ${(p) => p.theme.inputBorderWidth}px solid\n    ${(p) => clr(p.theme.inputColorBorder)};\n  border-radius: ${(p) => p.theme.borderRadius}em;\n\n  ${hoverStyles};\n  ${focusStyles};\n  ${disabledStyles};\n  ${sizeStyles};\n  ${transitionStyles('border-color', 'box-shadow')};\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 StyledInputProps {\n  hasLeft?: boolean;\n  hasRight?: boolean;\n}\nexport const StyledInput = styled(\n  'input',\n  omitEmotionProps('hasLeft', 'hasRight')\n)<StyledInputProps>`\n  ${resetFocusStyles};\n  appearance: none;\n  border: none;\n  font-size: 1em;\n  flex: 1;\n  overflow: hidden;\n\n  color: ${(p) => clr(p.theme.inputColorText)};\n  background-color: transparent;\n\n  &::placeholder {\n    color: ${(p) => clr(p.theme.inputColorPlaceholder)};\n  }\n\n  ${notHasLeftStyles};\n  ${notHasRightStyles};\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\nconst 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\nconst 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\n/**\n * The basic input component.\n */\nconst Input = forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      type = 'text',\n      left,\n      leftHasPadding = false,\n      right,\n      rightHasPadding = false,\n      disabled = false,\n      loading = false,\n      containerRef,\n      containerProps = {},\n      size,\n      value,\n      onChange = () => {},\n      ...rest\n    },\n    ref\n  ) => {\n    const [innerContainerRef, mergedContainerRef] =\n      useForwardedRef(containerRef);\n\n    const rightValue = useMemo(\n      () => (loading ? <Loading /> : right),\n      [loading, right]\n    );\n\n    const rightHasPaddingValue = useMemo(\n      () => (loading ? true : rightHasPadding),\n      [loading, rightHasPadding]\n    );\n\n    return (\n      <InputContainer\n        disabled={disabled}\n        size={size}\n        tabIndex={!disabled ? 0 : -1}\n        onFocus={(e) => {\n          // Focus the next element if the container element was focused.\n          // The next element will be the input or button in the addon.\n          if (disabled || e.target !== innerContainerRef.current) return;\n          const focusableElements = getFocusableElements(\n            innerContainerRef.current\n          );\n          focusableElements[0].focus();\n        }}\n        onKeyDown={(e) => {\n          // Focus the previous element if the first element in the input\n          // container is focused and the Shift + Tab combination is pressed.\n          const focusableElements = getFocusableElements(document);\n          const inputFocusableElements = innerContainerRef.current\n            ? getFocusableElements(innerContainerRef.current)\n            : [];\n          const firstInputElementIsFocused =\n            inputFocusableElements[0] === document.activeElement;\n          if (firstInputElementIsFocused && e.key === 'Tab' && e.shiftKey) {\n            const inputContainerIndex = focusableElements.findIndex(\n              (el) => el === innerContainerRef.current\n            );\n            if (inputContainerIndex === 0) return;\n            const elementBeforeInputContainer =\n              focusableElements[inputContainerIndex - 1];\n            elementBeforeInputContainer.focus();\n          }\n        }}\n        ref={mergedContainerRef}\n        {...containerProps}\n      >\n        {left && (\n          <ThemeOverrider overrides={{ buttonPaddingHorizontal: 0.8 }}>\n            <LeftAddon hasPadding={leftHasPadding}>{left}</LeftAddon>\n          </ThemeOverrider>\n        )}\n\n        <StyledInput\n          type={type}\n          disabled={disabled}\n          hasLeft={!!left}\n          hasRight={!!right}\n          value={value || ''}\n          onChange={(e) => onChange(e.target.value, e)}\n          {...rest}\n          ref={ref}\n        />\n\n        {rightValue && (\n          <ThemeOverrider overrides={{ buttonPaddingHorizontal: 0.8 }}>\n            <RightAddon hasPadding={rightHasPaddingValue}>\n              {rightValue}\n            </RightAddon>\n          </ThemeOverrider>\n        )}\n      </InputContainer>\n    );\n  }\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"file":"index.js"}

package/dist/esm/Input/index.js

@@ -122,6 +122,7 @@ const Input = /*#__PURE__*/forwardRef(({
   containerRef,
   containerProps = {},
   size,
+  value,
   onChange = () => {},
   ...rest
 }, ref) => {
@@ -165,6 +166,7 @@ const Input = /*#__PURE__*/forwardRef(({
     disabled: disabled,
     hasLeft: !!left,
     hasRight: !!right,
+    value: value || '',
     onChange: e => onChange(e.target.value, e)
   }, rest, {
     ref: ref

package/dist/esm/Input/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Input/index.tsx"],"names":["React","forwardRef","useMemo","resetFocusStyles","sizeStyles","transitionStyles","omitEmotionProps","useForwardedRef","styled","clr","ThemeOverrider","css","Loading","getFocusableElements","hoverStyles","p","disabled","theme","inputHoverColorBorder","focusStyles","inputFocusColorBorder","inputFocusColorShadow","disabledStyles","inputDisabledColorText","inputDisabledColorBg","inputDisabledColorBorder","inputDisabledColorPlaceholder","InputContainer","baseHeight","inputColorBg","inputBorderWidth","inputColorBorder","borderRadius","notHasLeftStyles","hasLeft","inputPaddingHorizontal","notHasRightStyles","hasRight","StyledInput","inputColorText","inputColorPlaceholder","Addon","LeftAddon","inputAddonPaddingHorizontal","hasPadding","RightAddon","Input","type","left","leftHasPadding","right","rightHasPadding","loading","containerRef","containerProps","size","onChange","rest","ref","innerContainerRef","mergedContainerRef","rightValue","rightHasPaddingValue","e","target","current","focusableElements","focus","document","inputFocusableElements","firstInputElementIsFocused","activeElement","key","shiftKey","inputContainerIndex","findIndex","el","elementBeforeInputContainer","buttonPaddingHorizontal","value","displayName"],"mappings":"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","sourcesContent":["import React, { ChangeEvent, ForwardedRef, forwardRef, useMemo } from 'react';\nimport {\n  resetFocusStyles,\n  sizeStyles,\n  transitionStyles,\n  WithSize,\n} from '@os-design/styles';\nimport { omitEmotionProps, useForwardedRef } from '@os-design/utils';\nimport styled from '@emotion/styled';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport { css } from '@emotion/react';\nimport { Loading } from '@os-design/icons';\nimport getFocusableElements from './utils/getFocusableElements';\n\ntype JsxInputProps = Omit<\n  JSX.IntrinsicElements['input'],\n  'value' | 'onChange' | 'size' | 'ref'\n>;\nexport interface InputProps extends JsxInputProps, WithSize {\n  /**\n   * Type of the input.\n   * @default text\n   */\n  type?: JsxInputProps['type'];\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   * Whether the input is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Shows the loading status.\n   * @default false\n   */\n  loading?: boolean;\n  /**\n   * The ref of the input container.\n   * @default undefined\n   */\n  containerRef?: ForwardedRef<HTMLDivElement>;\n  /**\n   * The props of the input container.\n   * @default undefined\n   */\n  containerProps?: JSX.IntrinsicElements['div'];\n  /**\n   * The input value.\n   * @default undefined\n   */\n  value?: string;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: string, e: ChangeEvent<HTMLInputElement>) => void;\n}\n\nconst hoverStyles = (p) =>\n  !p.disabled &&\n  css`\n    @media (hover: hover) {\n      &:hover {\n        border-color: ${clr(p.theme.inputHoverColorBorder)};\n      }\n    }\n  `;\n\nconst focusStyles = (p) =>\n  !p.disabled &&\n  css`\n    &:focus-within {\n      border-color: ${clr(p.theme.inputFocusColorBorder)};\n      box-shadow: 0 0 0 0.15em ${clr(p.theme.inputFocusColorShadow)};\n    }\n  `;\n\nconst disabledStyles = (p) =>\n  p.disabled &&\n  css`\n    cursor: not-allowed;\n    color: ${clr(p.theme.inputDisabledColorText)};\n    background-color: ${clr(p.theme.inputDisabledColorBg)};\n    border-color: ${clr(p.theme.inputDisabledColorBorder)};\n\n    input,\n    textarea {\n      cursor: not-allowed;\n      &::placeholder {\n        color: ${clr(p.theme.inputDisabledColorPlaceholder)};\n      }\n    }\n  `;\n\ntype InputContainerProps = Pick<InputProps, 'disabled' | 'size'>;\nexport const InputContainer = styled(\n  'div',\n  omitEmotionProps('disabled', 'size')\n)<InputContainerProps>`\n  ${resetFocusStyles};\n\n  display: inline-flex;\n  width: 100%;\n  height: ${(p) => p.theme.baseHeight}em;\n  box-sizing: border-box;\n  background-color: ${(p) => clr(p.theme.inputColorBg)};\n\n  border: ${(p) => p.theme.inputBorderWidth}px solid\n    ${(p) => clr(p.theme.inputColorBorder)};\n  border-radius: ${(p) => p.theme.borderRadius}em;\n\n  ${hoverStyles};\n  ${focusStyles};\n  ${disabledStyles};\n  ${sizeStyles};\n  ${transitionStyles('border-color', 'box-shadow')};\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 StyledInputProps {\n  hasLeft?: boolean;\n  hasRight?: boolean;\n}\nexport const StyledInput = styled(\n  'input',\n  omitEmotionProps('hasLeft', 'hasRight')\n)<StyledInputProps>`\n  ${resetFocusStyles};\n  appearance: none;\n  border: none;\n  font-size: 1em;\n  flex: 1;\n  overflow: hidden;\n\n  color: ${(p) => clr(p.theme.inputColorText)};\n  background-color: transparent;\n\n  &::placeholder {\n    color: ${(p) => clr(p.theme.inputColorPlaceholder)};\n  }\n\n  ${notHasLeftStyles};\n  ${notHasRightStyles};\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\nconst 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\nconst 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\n/**\n * The basic input component.\n */\nconst Input = forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      type = 'text',\n      left,\n      leftHasPadding = false,\n      right,\n      rightHasPadding = false,\n      disabled = false,\n      loading = false,\n      containerRef,\n      containerProps = {},\n      size,\n      onChange = () => {},\n      ...rest\n    },\n    ref\n  ) => {\n    const [innerContainerRef, mergedContainerRef] =\n      useForwardedRef(containerRef);\n\n    const rightValue = useMemo(\n      () => (loading ? <Loading /> : right),\n      [loading, right]\n    );\n\n    const rightHasPaddingValue = useMemo(\n      () => (loading ? true : rightHasPadding),\n      [loading, rightHasPadding]\n    );\n\n    return (\n      <InputContainer\n        disabled={disabled}\n        size={size}\n        tabIndex={!disabled ? 0 : -1}\n        onFocus={(e) => {\n          // Focus the next element if the container element was focused.\n          // The next element will be the input or button in the addon.\n          if (disabled || e.target !== innerContainerRef.current) return;\n          const focusableElements = getFocusableElements(\n            innerContainerRef.current\n          );\n          focusableElements[0].focus();\n        }}\n        onKeyDown={(e) => {\n          // Focus the previous element if the first element in the input\n          // container is focused and the Shift + Tab combination is pressed.\n          const focusableElements = getFocusableElements(document);\n          const inputFocusableElements = innerContainerRef.current\n            ? getFocusableElements(innerContainerRef.current)\n            : [];\n          const firstInputElementIsFocused =\n            inputFocusableElements[0] === document.activeElement;\n          if (firstInputElementIsFocused && e.key === 'Tab' && e.shiftKey) {\n            const inputContainerIndex = focusableElements.findIndex(\n              (el) => el === innerContainerRef.current\n            );\n            if (inputContainerIndex === 0) return;\n            const elementBeforeInputContainer =\n              focusableElements[inputContainerIndex - 1];\n            elementBeforeInputContainer.focus();\n          }\n        }}\n        ref={mergedContainerRef}\n        {...containerProps}\n      >\n        {left && (\n          <ThemeOverrider overrides={{ buttonPaddingHorizontal: 0.8 }}>\n            <LeftAddon hasPadding={leftHasPadding}>{left}</LeftAddon>\n          </ThemeOverrider>\n        )}\n\n        <StyledInput\n          type={type}\n          disabled={disabled}\n          hasLeft={!!left}\n          hasRight={!!right}\n          onChange={(e) => onChange(e.target.value, e)}\n          {...rest}\n          ref={ref}\n        />\n\n        {rightValue && (\n          <ThemeOverrider overrides={{ buttonPaddingHorizontal: 0.8 }}>\n            <RightAddon hasPadding={rightHasPaddingValue}>\n              {rightValue}\n            </RightAddon>\n          </ThemeOverrider>\n        )}\n      </InputContainer>\n    );\n  }\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"file":"index.js"}
+{"version":3,"sources":["../../../src/Input/index.tsx"],"names":["React","forwardRef","useMemo","resetFocusStyles","sizeStyles","transitionStyles","omitEmotionProps","useForwardedRef","styled","clr","ThemeOverrider","css","Loading","getFocusableElements","hoverStyles","p","disabled","theme","inputHoverColorBorder","focusStyles","inputFocusColorBorder","inputFocusColorShadow","disabledStyles","inputDisabledColorText","inputDisabledColorBg","inputDisabledColorBorder","inputDisabledColorPlaceholder","InputContainer","baseHeight","inputColorBg","inputBorderWidth","inputColorBorder","borderRadius","notHasLeftStyles","hasLeft","inputPaddingHorizontal","notHasRightStyles","hasRight","StyledInput","inputColorText","inputColorPlaceholder","Addon","LeftAddon","inputAddonPaddingHorizontal","hasPadding","RightAddon","Input","type","left","leftHasPadding","right","rightHasPadding","loading","containerRef","containerProps","size","value","onChange","rest","ref","innerContainerRef","mergedContainerRef","rightValue","rightHasPaddingValue","e","target","current","focusableElements","focus","document","inputFocusableElements","firstInputElementIsFocused","activeElement","key","shiftKey","inputContainerIndex","findIndex","el","elementBeforeInputContainer","buttonPaddingHorizontal","displayName"],"mappings":"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","sourcesContent":["import React, { ChangeEvent, ForwardedRef, forwardRef, useMemo } from 'react';\nimport {\n  resetFocusStyles,\n  sizeStyles,\n  transitionStyles,\n  WithSize,\n} from '@os-design/styles';\nimport { omitEmotionProps, useForwardedRef } from '@os-design/utils';\nimport styled from '@emotion/styled';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport { css } from '@emotion/react';\nimport { Loading } from '@os-design/icons';\nimport getFocusableElements from './utils/getFocusableElements';\n\ntype JsxInputProps = Omit<\n  JSX.IntrinsicElements['input'],\n  'value' | 'onChange' | 'size' | 'ref'\n>;\nexport interface InputProps extends JsxInputProps, WithSize {\n  /**\n   * Type of the input.\n   * @default text\n   */\n  type?: JsxInputProps['type'];\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   * Whether the input is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Shows the loading status.\n   * @default false\n   */\n  loading?: boolean;\n  /**\n   * The ref of the input container.\n   * @default undefined\n   */\n  containerRef?: ForwardedRef<HTMLDivElement>;\n  /**\n   * The props of the input container.\n   * @default undefined\n   */\n  containerProps?: JSX.IntrinsicElements['div'];\n  /**\n   * The input value.\n   * @default undefined\n   */\n  value?: string;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: string, e: ChangeEvent<HTMLInputElement>) => void;\n}\n\nconst hoverStyles = (p) =>\n  !p.disabled &&\n  css`\n    @media (hover: hover) {\n      &:hover {\n        border-color: ${clr(p.theme.inputHoverColorBorder)};\n      }\n    }\n  `;\n\nconst focusStyles = (p) =>\n  !p.disabled &&\n  css`\n    &:focus-within {\n      border-color: ${clr(p.theme.inputFocusColorBorder)};\n      box-shadow: 0 0 0 0.15em ${clr(p.theme.inputFocusColorShadow)};\n    }\n  `;\n\nconst disabledStyles = (p) =>\n  p.disabled &&\n  css`\n    cursor: not-allowed;\n    color: ${clr(p.theme.inputDisabledColorText)};\n    background-color: ${clr(p.theme.inputDisabledColorBg)};\n    border-color: ${clr(p.theme.inputDisabledColorBorder)};\n\n    input,\n    textarea {\n      cursor: not-allowed;\n      &::placeholder {\n        color: ${clr(p.theme.inputDisabledColorPlaceholder)};\n      }\n    }\n  `;\n\ntype InputContainerProps = Pick<InputProps, 'disabled' | 'size'>;\nexport const InputContainer = styled(\n  'div',\n  omitEmotionProps('disabled', 'size')\n)<InputContainerProps>`\n  ${resetFocusStyles};\n\n  display: inline-flex;\n  width: 100%;\n  height: ${(p) => p.theme.baseHeight}em;\n  box-sizing: border-box;\n  background-color: ${(p) => clr(p.theme.inputColorBg)};\n\n  border: ${(p) => p.theme.inputBorderWidth}px solid\n    ${(p) => clr(p.theme.inputColorBorder)};\n  border-radius: ${(p) => p.theme.borderRadius}em;\n\n  ${hoverStyles};\n  ${focusStyles};\n  ${disabledStyles};\n  ${sizeStyles};\n  ${transitionStyles('border-color', 'box-shadow')};\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 StyledInputProps {\n  hasLeft?: boolean;\n  hasRight?: boolean;\n}\nexport const StyledInput = styled(\n  'input',\n  omitEmotionProps('hasLeft', 'hasRight')\n)<StyledInputProps>`\n  ${resetFocusStyles};\n  appearance: none;\n  border: none;\n  font-size: 1em;\n  flex: 1;\n  overflow: hidden;\n\n  color: ${(p) => clr(p.theme.inputColorText)};\n  background-color: transparent;\n\n  &::placeholder {\n    color: ${(p) => clr(p.theme.inputColorPlaceholder)};\n  }\n\n  ${notHasLeftStyles};\n  ${notHasRightStyles};\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\nconst 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\nconst 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\n/**\n * The basic input component.\n */\nconst Input = forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      type = 'text',\n      left,\n      leftHasPadding = false,\n      right,\n      rightHasPadding = false,\n      disabled = false,\n      loading = false,\n      containerRef,\n      containerProps = {},\n      size,\n      value,\n      onChange = () => {},\n      ...rest\n    },\n    ref\n  ) => {\n    const [innerContainerRef, mergedContainerRef] =\n      useForwardedRef(containerRef);\n\n    const rightValue = useMemo(\n      () => (loading ? <Loading /> : right),\n      [loading, right]\n    );\n\n    const rightHasPaddingValue = useMemo(\n      () => (loading ? true : rightHasPadding),\n      [loading, rightHasPadding]\n    );\n\n    return (\n      <InputContainer\n        disabled={disabled}\n        size={size}\n        tabIndex={!disabled ? 0 : -1}\n        onFocus={(e) => {\n          // Focus the next element if the container element was focused.\n          // The next element will be the input or button in the addon.\n          if (disabled || e.target !== innerContainerRef.current) return;\n          const focusableElements = getFocusableElements(\n            innerContainerRef.current\n          );\n          focusableElements[0].focus();\n        }}\n        onKeyDown={(e) => {\n          // Focus the previous element if the first element in the input\n          // container is focused and the Shift + Tab combination is pressed.\n          const focusableElements = getFocusableElements(document);\n          const inputFocusableElements = innerContainerRef.current\n            ? getFocusableElements(innerContainerRef.current)\n            : [];\n          const firstInputElementIsFocused =\n            inputFocusableElements[0] === document.activeElement;\n          if (firstInputElementIsFocused && e.key === 'Tab' && e.shiftKey) {\n            const inputContainerIndex = focusableElements.findIndex(\n              (el) => el === innerContainerRef.current\n            );\n            if (inputContainerIndex === 0) return;\n            const elementBeforeInputContainer =\n              focusableElements[inputContainerIndex - 1];\n            elementBeforeInputContainer.focus();\n          }\n        }}\n        ref={mergedContainerRef}\n        {...containerProps}\n      >\n        {left && (\n          <ThemeOverrider overrides={{ buttonPaddingHorizontal: 0.8 }}>\n            <LeftAddon hasPadding={leftHasPadding}>{left}</LeftAddon>\n          </ThemeOverrider>\n        )}\n\n        <StyledInput\n          type={type}\n          disabled={disabled}\n          hasLeft={!!left}\n          hasRight={!!right}\n          value={value || ''}\n          onChange={(e) => onChange(e.target.value, e)}\n          {...rest}\n          ref={ref}\n        />\n\n        {rightValue && (\n          <ThemeOverrider overrides={{ buttonPaddingHorizontal: 0.8 }}>\n            <RightAddon hasPadding={rightHasPaddingValue}>\n              {rightValue}\n            </RightAddon>\n          </ThemeOverrider>\n        )}\n      </InputContainer>\n    );\n  }\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"file":"index.js"}

package/dist/types/Input/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Input/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,YAAY,EAAuB,MAAM,OAAO,CAAC;AAC9E,OAAO,EAIL,QAAQ,EACT,MAAM,mBAAmB,CAAC;AAQ3B,aAAK,aAAa,GAAG,IAAI,CACvB,GAAG,CAAC,iBAAiB,CAAC,OAAO,CAAC,EAC9B,OAAO,GAAG,UAAU,GAAG,MAAM,GAAG,KAAK,CACtC,CAAC;AACF,MAAM,WAAW,UAAW,SAAQ,aAAa,EAAE,QAAQ;IAKzD,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAK7B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAMvB,cAAc,CAAC,EAAE,OAAO,CAAC;IAKzB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAMxB,eAAe,CAAC,EAAE,OAAO,CAAC;IAK1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAKnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAKlB,YAAY,CAAC,EAAE,YAAY,CAAC,cAAc,CAAC,CAAC;IAK5C,cAAc,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAK9C,KAAK,CAAC,EAAE,MAAM,CAAC;IAKf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CACtE;AAuCD,eAAO,MAAM,cAAc;;;6HAqB1B,CAAC;AAcF,UAAU,gBAAgB;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AACD,eAAO,MAAM,WAAW;;;iHAoBvB,CAAC;AAqCF,QAAA,MAAM,KAAK,qFA6FV,CAAC;AAIF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Input/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,YAAY,EAAuB,MAAM,OAAO,CAAC;AAC9E,OAAO,EAIL,QAAQ,EACT,MAAM,mBAAmB,CAAC;AAQ3B,aAAK,aAAa,GAAG,IAAI,CACvB,GAAG,CAAC,iBAAiB,CAAC,OAAO,CAAC,EAC9B,OAAO,GAAG,UAAU,GAAG,MAAM,GAAG,KAAK,CACtC,CAAC;AACF,MAAM,WAAW,UAAW,SAAQ,aAAa,EAAE,QAAQ;IAKzD,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAK7B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAMvB,cAAc,CAAC,EAAE,OAAO,CAAC;IAKzB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAMxB,eAAe,CAAC,EAAE,OAAO,CAAC;IAK1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAKnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAKlB,YAAY,CAAC,EAAE,YAAY,CAAC,cAAc,CAAC,CAAC;IAK5C,cAAc,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAK9C,KAAK,CAAC,EAAE,MAAM,CAAC;IAKf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CACtE;AAuCD,eAAO,MAAM,cAAc;;;6HAqB1B,CAAC;AAcF,UAAU,gBAAgB;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AACD,eAAO,MAAM,WAAW;;;iHAoBvB,CAAC;AAqCF,QAAA,MAAM,KAAK,qFA+FV,CAAC;AAIF,eAAe,KAAK,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@os-design/core",
-  "version": "1.0.131",
+  "version": "1.0.132",
   "license": "UNLICENSED",
   "repository": "git@gitlab.com:os-team/libs/os-design.git",
   "main": "dist/cjs/index.js",
@@ -56,5 +56,5 @@
     "react": ">=18",
     "react-dom": ">=18"
   },
-  "gitHead": "afbec2e0a1f78f54c4e4adf75a30ed93e758665c"
+  "gitHead": "d81c7eedcdf14120ac9d0fa830a5eeb83abf01ac"
 }