@remember-web/primitive 0.2.14 → 0.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/src/Floating/Popover/styles.cjs.js.map +1 -1
- package/dist/src/Floating/Popover/styles.d.ts +1 -1
- package/dist/src/Floating/Popover/styles.d.ts.map +1 -1
- package/dist/src/Floating/Popover/styles.esm.js.map +1 -1
- package/dist/src/Inputs/Select/DesignedSelect/styles.cjs.js +1 -1
- package/dist/src/Inputs/Select/DesignedSelect/styles.cjs.js.map +1 -1
- package/dist/src/Inputs/Select/DesignedSelect/styles.esm.js +1 -1
- package/dist/src/Inputs/Select/DesignedSelect/styles.esm.js.map +1 -1
- package/dist/src/Inputs/Select/index.cjs.js +25 -39
- package/dist/src/Inputs/Select/index.cjs.js.map +1 -1
- package/dist/src/Inputs/Select/index.d.ts.map +1 -1
- package/dist/src/Inputs/Select/index.esm.js +26 -40
- package/dist/src/Inputs/Select/index.esm.js.map +1 -1
- package/dist/src/Inputs/Select/styles.cjs.js +1 -3
- package/dist/src/Inputs/Select/styles.cjs.js.map +1 -1
- package/dist/src/Inputs/Select/styles.d.ts +0 -1
- package/dist/src/Inputs/Select/styles.d.ts.map +1 -1
- package/dist/src/Inputs/Select/styles.esm.js +3 -4
- package/dist/src/Inputs/Select/styles.esm.js.map +1 -1
- package/dist/src/Inputs/Select/types.d.ts +0 -4
- package/dist/src/Inputs/Select/types.d.ts.map +1 -1
- package/package.json +3 -2
- package/src/Floating/Popover/styles.ts +6 -4
- package/src/Inputs/Select/DesignedSelect/styles.ts +1 -1
- package/src/Inputs/Select/Select.stories.tsx +0 -1
- package/src/Inputs/Select/index.tsx +30 -48
- package/src/Inputs/Select/styles.ts +0 -15
- package/src/Inputs/Select/types.ts +0 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.cjs.js","sources":["../../../../src/Floating/Popover/styles.ts"],"sourcesContent":["import { PopoverContent, PopoverContentProps } from '@radix-ui/react-popover';\nimport { bg100, contents000 } from '@remember-web/mixin';\nimport { CSSProperties } from 'react';\nimport styled, { css, keyframes } from 'styled-components';\n\nexport const showFadeIn = keyframes`\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n`;\nexport const showFadeOut = keyframes`\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n`;\n\nexport const StyledPopoverContentWrapper = styled.div<{$zIndex?: CSSProperties['zIndex']}>`\n [data-radix-popper-content-wrapper]{\n ${({$zIndex}) => $zIndex && css` z-index: ${$zIndex} !important; `}\n }\n
|
|
1
|
+
{"version":3,"file":"styles.cjs.js","sources":["../../../../src/Floating/Popover/styles.ts"],"sourcesContent":["import { PopoverContent, PopoverContentProps } from '@radix-ui/react-popover';\nimport { bg100, contents000 } from '@remember-web/mixin';\nimport type { CSSProperties } from 'react';\nimport styled, { css, keyframes } from 'styled-components';\n\nexport const showFadeIn = keyframes`\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n`;\nexport const showFadeOut = keyframes`\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n`;\n\nexport const StyledPopoverContentWrapper = styled.div<{\n $zIndex?: CSSProperties['zIndex'];\n}>`\n [data-radix-popper-content-wrapper]{\n ${({ $zIndex }) => $zIndex && css` z-index: ${$zIndex} !important; `}\n }\n`;\n\nexport const StyledPopoverContent = styled(PopoverContent)`\n contain: paint;\n width: fit-content;\n margin: 0;\n padding: 0;\n border-radius: 4px;\n\n box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);\n color: ${contents000};\n background-color: ${bg100};\n white-space: pre-line;\n\n height: 100%;\n will-change: box-shadow;\n\n &:focus {\n outline: none;\n }\n &[data-state='open'] {\n animation: ${showFadeIn} 0.12s cubic-bezier(0.35, 0, 0.25, 1) both;\n }\n &:not([data-state='open']) {\n animation: ${showFadeOut} 0.16s cubic-bezier(0.35, 0, 0.25, 1) both;\n }\n`;\n\nStyledPopoverContent.defaultProps = {\n avoidCollisions: true,\n align: 'start',\n side: 'bottom',\n sideOffset: 4,\n};\n"],"names":["showFadeIn","keyframes","_templateObject","_taggedTemplateLiteral","showFadeOut","_templateObject2","StyledPopoverContentWrapper","styled","div","_templateObject3","_ref","$zIndex","css","_templateObject4","StyledPopoverContent","PopoverContent","_templateObject5","contents000","bg100","defaultProps","avoidCollisions","align","side","sideOffset"],"mappings":";;;;;;;;;;;;;AAKO,IAAMA,UAAU,GAAGC,gBAAS,CAAAC,eAAA,KAAAA,eAAA,GAAAC,uCAAA,CAOlC,CAAA,kFAAA,CAAA,CAAA,CAAA,EAAA;AACM,IAAMC,WAAW,GAAGH,gBAAS,CAAAI,gBAAA,KAAAA,gBAAA,GAAAF,uCAAA,CAOnC,CAAA,kFAAA,CAAA,CAAA,CAAA,EAAA;AAEYG,IAAAA,2BAA2B,GAAGC,uBAAM,CAACC,GAAG,CAAAC,gBAAA,KAAAA,gBAAA,GAAAN,uCAAA,CAAA,CAAA,gDAAA,EAAA,SAAA,CAAA,CAAA,CAAA,EAI/C,UAAAO,IAAA,EAAA;AAAA,EAAA,IAAGC,OAAO,GAAAD,IAAA,CAAPC,OAAO,CAAA;EAAA,OAAOA,OAAO,IAAIC,UAAG,CAAAC,gBAAA,KAAAA,gBAAA,GAAAV,uCAAA,CAAaQ,CAAAA,YAAAA,EAAAA,eAAAA,CAAAA,CAAAA,CAAAA,EAAAA,OAAO,CAAe,CAAA;AAAA,CAEvE,EAAA;AAEM,IAAMG,oBAAoB,GAAGP,uBAAM,CAACQ,2BAAc,CAAC,CAAAC,gBAAA,KAAAA,gBAAA,GAAAb,uCAAA,2fAQ/Cc,iBAAW,EACAC,WAAK,EAUVlB,UAAU,EAGVI,WAAW,EAE3B;AAEDU,oBAAoB,CAACK,YAAY,GAAG;AAClCC,EAAAA,eAAe,EAAE,IAAI;AACrBC,EAAAA,KAAK,EAAE,OAAO;AACdC,EAAAA,IAAI,EAAE,QAAQ;AACdC,EAAAA,UAAU,EAAE,CAAA;AACd,CAAC;;;;;;;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { PopoverContentProps } from '@radix-ui/react-popover';
|
|
2
|
-
import { CSSProperties } from 'react';
|
|
2
|
+
import type { CSSProperties } from 'react';
|
|
3
3
|
export declare const showFadeIn: import("styled-components/dist/models/Keyframes").default;
|
|
4
4
|
export declare const showFadeOut: import("styled-components/dist/models/Keyframes").default;
|
|
5
5
|
export declare const StyledPopoverContentWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/Floating/Popover/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAE9E,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/Floating/Popover/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkB,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAE9E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAG3C,eAAO,MAAM,UAAU,2DAOtB,CAAC;AACF,eAAO,MAAM,WAAW,2DAOvB,CAAC;AAEF,eAAO,MAAM,2BAA2B;cAC5B,aAAa,CAAC,QAAQ,CAAC;GAKlC,CAAC;AAEF,eAAO,MAAM,oBAAoB;;gLAwBhC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.esm.js","sources":["../../../../src/Floating/Popover/styles.ts"],"sourcesContent":["import { PopoverContent, PopoverContentProps } from '@radix-ui/react-popover';\nimport { bg100, contents000 } from '@remember-web/mixin';\nimport { CSSProperties } from 'react';\nimport styled, { css, keyframes } from 'styled-components';\n\nexport const showFadeIn = keyframes`\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n`;\nexport const showFadeOut = keyframes`\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n`;\n\nexport const StyledPopoverContentWrapper = styled.div<{$zIndex?: CSSProperties['zIndex']}>`\n [data-radix-popper-content-wrapper]{\n ${({$zIndex}) => $zIndex && css` z-index: ${$zIndex} !important; `}\n }\n
|
|
1
|
+
{"version":3,"file":"styles.esm.js","sources":["../../../../src/Floating/Popover/styles.ts"],"sourcesContent":["import { PopoverContent, PopoverContentProps } from '@radix-ui/react-popover';\nimport { bg100, contents000 } from '@remember-web/mixin';\nimport type { CSSProperties } from 'react';\nimport styled, { css, keyframes } from 'styled-components';\n\nexport const showFadeIn = keyframes`\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n`;\nexport const showFadeOut = keyframes`\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n`;\n\nexport const StyledPopoverContentWrapper = styled.div<{\n $zIndex?: CSSProperties['zIndex'];\n}>`\n [data-radix-popper-content-wrapper]{\n ${({ $zIndex }) => $zIndex && css` z-index: ${$zIndex} !important; `}\n }\n`;\n\nexport const StyledPopoverContent = styled(PopoverContent)`\n contain: paint;\n width: fit-content;\n margin: 0;\n padding: 0;\n border-radius: 4px;\n\n box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);\n color: ${contents000};\n background-color: ${bg100};\n white-space: pre-line;\n\n height: 100%;\n will-change: box-shadow;\n\n &:focus {\n outline: none;\n }\n &[data-state='open'] {\n animation: ${showFadeIn} 0.12s cubic-bezier(0.35, 0, 0.25, 1) both;\n }\n &:not([data-state='open']) {\n animation: ${showFadeOut} 0.16s cubic-bezier(0.35, 0, 0.25, 1) both;\n }\n`;\n\nStyledPopoverContent.defaultProps = {\n avoidCollisions: true,\n align: 'start',\n side: 'bottom',\n sideOffset: 4,\n};\n"],"names":["showFadeIn","keyframes","_templateObject","_taggedTemplateLiteral","showFadeOut","_templateObject2","StyledPopoverContentWrapper","styled","div","_templateObject3","_ref","$zIndex","css","_templateObject4","StyledPopoverContent","PopoverContent","_templateObject5","contents000","bg100","defaultProps","avoidCollisions","align","side","sideOffset"],"mappings":";;;;;;AAKO,IAAMA,UAAU,GAAGC,SAAS,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,CAOlC,CAAA,kFAAA,CAAA,CAAA,CAAA,EAAA;AACM,IAAMC,WAAW,GAAGH,SAAS,CAAAI,gBAAA,KAAAA,gBAAA,GAAAF,sBAAA,CAOnC,CAAA,kFAAA,CAAA,CAAA,CAAA,EAAA;AAEYG,IAAAA,2BAA2B,GAAGC,MAAM,CAACC,GAAG,CAAAC,gBAAA,KAAAA,gBAAA,GAAAN,sBAAA,CAAA,CAAA,gDAAA,EAAA,SAAA,CAAA,CAAA,CAAA,EAI/C,UAAAO,IAAA,EAAA;AAAA,EAAA,IAAGC,OAAO,GAAAD,IAAA,CAAPC,OAAO,CAAA;EAAA,OAAOA,OAAO,IAAIC,GAAG,CAAAC,gBAAA,KAAAA,gBAAA,GAAAV,sBAAA,CAAaQ,CAAAA,YAAAA,EAAAA,eAAAA,CAAAA,CAAAA,CAAAA,EAAAA,OAAO,CAAe,CAAA;AAAA,CAEvE,EAAA;AAEM,IAAMG,oBAAoB,GAAGP,MAAM,CAACQ,cAAc,CAAC,CAAAC,gBAAA,KAAAA,gBAAA,GAAAb,sBAAA,2fAQ/Cc,WAAW,EACAC,KAAK,EAUVlB,UAAU,EAGVI,WAAW,EAE3B;AAEDU,oBAAoB,CAACK,YAAY,GAAG;AAClCC,EAAAA,eAAe,EAAE,IAAI;AACrBC,EAAAA,KAAK,EAAE,OAAO;AACdC,EAAAA,IAAI,EAAE,QAAQ;AACdC,EAAAA,UAAU,EAAE,CAAA;AACd,CAAC;;;;"}
|
|
@@ -24,7 +24,7 @@ var StyledSelect = styled__default.default.div(_templateObject || (_templateObje
|
|
|
24
24
|
return isPlaceholder && styled.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default.default(["\n color: ", ";\n "])), mixin.contents200);
|
|
25
25
|
}, styles.SelectContainer, mixin.contents000, styles.SelectContainer, mixin.bg200, mixin.bg300);
|
|
26
26
|
var SelectDownIcon = styled__default.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default.default(["\n position: absolute;\n right: 12px;\n top: 50%;\n transform: translateY(-50%);\n\n & > svg {\n display: block;\n }\n\n pointer-events: none;\n"])));
|
|
27
|
-
var SelectOptionWrapper = styled__default.default.ul(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral__default.default(["\n all: unset;\n position: absolute;\n left: 0;\n right: 0;\n z-index: 1;\n border: 1px solid ", ";\n background-color: ", ";\n overflow-y:
|
|
27
|
+
var SelectOptionWrapper = styled__default.default.ul(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral__default.default(["\n all: unset;\n position: absolute;\n left: 0;\n right: 0;\n z-index: 1;\n border: 1px solid ", ";\n background-color: ", ";\n overflow-y: auto;\n overscroll-behavior: contain;\n transition: border-color 0.2s, background-color 0.2s;\n\n ", ";\n\n ", "\n\n ", ":focus &, ", ":focus-within & {\n outline: none;\n border-color: ", ";\n }\n"])), mixin.contents300, mixin.bg100, function (_ref3) {
|
|
28
28
|
var maxHeight = _ref3.maxHeight;
|
|
29
29
|
if (!maxHeight) {
|
|
30
30
|
return null;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.cjs.js","sources":["../../../../../src/Inputs/Select/DesignedSelect/styles.ts"],"sourcesContent":["'use client';\n\nimport {\n bg100,\n bg200,\n bg300,\n contents000,\n contents200,\n contents300,\n ellipsis,\n} from '@remember-web/mixin';\nimport styled, { css } from 'styled-components';\n\nimport { SelectContainer } from '../styles';\nimport type { ExpandedType } from './types';\n\nexport const StyledSelect = styled.div<{\n expandedDirection?: ExpandedType;\n isPlaceholder?: boolean;\n}>`\n ${ellipsis()}\n border: 1px solid ${contents300};\n ${({ expandedDirection }) =>\n ({\n none: css`\n border-radius: 4px;\n `,\n above: css`\n border-radius: 0 0 4px 4px;\n border-top-color: transparent;\n `,\n below: css`\n border-radius: 4px 4px 0 0;\n border-bottom-color: transparent;\n `,\n })[expandedDirection ?? 'none']};\n\n padding: 10px 36px 10px 12px;\n transition: border-color 0.2s, background-color 0.2s;\n\n ${({ isPlaceholder }) =>\n isPlaceholder &&\n css`\n color: ${contents200};\n `}\n\n ${SelectContainer}:focus-within & {\n outline: none;\n border-color: ${contents000};\n }\n ${SelectContainer}:not([aria-disabled='true']) & {\n @media (hover: hover) {\n &:hover {\n background-color: ${bg200};\n }\n }\n\n &:active {\n background-color: ${bg300};\n }\n }\n`;\n\nexport const SelectDownIcon = styled.div`\n position: absolute;\n right: 12px;\n top: 50%;\n transform: translateY(-50%);\n\n & > svg {\n display: block;\n }\n\n pointer-events: none;\n`;\n\nexport const SelectOptionWrapper = styled.ul<{\n expandedDirection?: ExpandedType;\n maxHeight?: number | string;\n}>`\n all: unset;\n position: absolute;\n left: 0;\n right: 0;\n z-index: 1;\n border: 1px solid ${contents300};\n background-color: ${bg100};\n overflow-y:
|
|
1
|
+
{"version":3,"file":"styles.cjs.js","sources":["../../../../../src/Inputs/Select/DesignedSelect/styles.ts"],"sourcesContent":["'use client';\n\nimport {\n bg100,\n bg200,\n bg300,\n contents000,\n contents200,\n contents300,\n ellipsis,\n} from '@remember-web/mixin';\nimport styled, { css } from 'styled-components';\n\nimport { SelectContainer } from '../styles';\nimport type { ExpandedType } from './types';\n\nexport const StyledSelect = styled.div<{\n expandedDirection?: ExpandedType;\n isPlaceholder?: boolean;\n}>`\n ${ellipsis()}\n border: 1px solid ${contents300};\n ${({ expandedDirection }) =>\n ({\n none: css`\n border-radius: 4px;\n `,\n above: css`\n border-radius: 0 0 4px 4px;\n border-top-color: transparent;\n `,\n below: css`\n border-radius: 4px 4px 0 0;\n border-bottom-color: transparent;\n `,\n })[expandedDirection ?? 'none']};\n\n padding: 10px 36px 10px 12px;\n transition: border-color 0.2s, background-color 0.2s;\n\n ${({ isPlaceholder }) =>\n isPlaceholder &&\n css`\n color: ${contents200};\n `}\n\n ${SelectContainer}:focus-within & {\n outline: none;\n border-color: ${contents000};\n }\n ${SelectContainer}:not([aria-disabled='true']) & {\n @media (hover: hover) {\n &:hover {\n background-color: ${bg200};\n }\n }\n\n &:active {\n background-color: ${bg300};\n }\n }\n`;\n\nexport const SelectDownIcon = styled.div`\n position: absolute;\n right: 12px;\n top: 50%;\n transform: translateY(-50%);\n\n & > svg {\n display: block;\n }\n\n pointer-events: none;\n`;\n\nexport const SelectOptionWrapper = styled.ul<{\n expandedDirection?: ExpandedType;\n maxHeight?: number | string;\n}>`\n all: unset;\n position: absolute;\n left: 0;\n right: 0;\n z-index: 1;\n border: 1px solid ${contents300};\n background-color: ${bg100};\n overflow-y: auto;\n overscroll-behavior: contain;\n transition: border-color 0.2s, background-color 0.2s;\n\n ${({ maxHeight }) => {\n if (!maxHeight) {\n return null;\n }\n\n if (typeof maxHeight === 'number') {\n return css`\n max-height: ${maxHeight}px;\n `;\n }\n\n return css`\n max-height: ${maxHeight};\n `;\n }};\n\n ${({ expandedDirection }) =>\n expandedDirection === 'below'\n ? css`\n top: calc(100% - 1px);\n border-top: none;\n border-radius: 0 0 4px 4px;\n `\n : css`\n bottom: calc(100% - 1px);\n border-bottom: none;\n border-radius: 4px 4px 0 0;\n `}\n\n ${SelectContainer}:focus &, ${SelectContainer}:focus-within & {\n outline: none;\n border-color: ${contents000};\n }\n`;\n\nexport const SelectOption = styled.li<{ isSelected?: boolean }>`\n ${ellipsis()}\n padding: 10px 12px;\n color: ${contents000};\n\n &[aria-disabled='true'] {\n color: ${contents300};\n }\n\n &:focus {\n background-color: ${bg200};\n outline: none;\n }\n\n ${({ isSelected }) =>\n isSelected &&\n css`\n background-color: ${bg200};\n `}\n`;\n"],"names":["below","SelectDownIcon"],"mappings":";;;;;;;;;;;;;AAAa;AAgBN;AAMH;;;;AASEA;;AAI6B;AAK/B;;AAIC;AAmBQC;;AA4BU;;AAEjB;AACF;AAEA;;AAIA;;AAKF;AAEE;AAAoB;AAWf;AAQF;AAcH;;AAIC;;;;;"}
|
|
@@ -17,7 +17,7 @@ var StyledSelect = styled.div(_templateObject || (_templateObject = _taggedTempl
|
|
|
17
17
|
return isPlaceholder && css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n color: ", ";\n "])), contents200);
|
|
18
18
|
}, SelectContainer, contents000, SelectContainer, bg200, bg300);
|
|
19
19
|
var SelectDownIcon = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n position: absolute;\n right: 12px;\n top: 50%;\n transform: translateY(-50%);\n\n & > svg {\n display: block;\n }\n\n pointer-events: none;\n"])));
|
|
20
|
-
var SelectOptionWrapper = styled.ul(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n all: unset;\n position: absolute;\n left: 0;\n right: 0;\n z-index: 1;\n border: 1px solid ", ";\n background-color: ", ";\n overflow-y:
|
|
20
|
+
var SelectOptionWrapper = styled.ul(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n all: unset;\n position: absolute;\n left: 0;\n right: 0;\n z-index: 1;\n border: 1px solid ", ";\n background-color: ", ";\n overflow-y: auto;\n overscroll-behavior: contain;\n transition: border-color 0.2s, background-color 0.2s;\n\n ", ";\n\n ", "\n\n ", ":focus &, ", ":focus-within & {\n outline: none;\n border-color: ", ";\n }\n"])), contents300, bg100, function (_ref3) {
|
|
21
21
|
var maxHeight = _ref3.maxHeight;
|
|
22
22
|
if (!maxHeight) {
|
|
23
23
|
return null;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.esm.js","sources":["../../../../../src/Inputs/Select/DesignedSelect/styles.ts"],"sourcesContent":["'use client';\n\nimport {\n bg100,\n bg200,\n bg300,\n contents000,\n contents200,\n contents300,\n ellipsis,\n} from '@remember-web/mixin';\nimport styled, { css } from 'styled-components';\n\nimport { SelectContainer } from '../styles';\nimport type { ExpandedType } from './types';\n\nexport const StyledSelect = styled.div<{\n expandedDirection?: ExpandedType;\n isPlaceholder?: boolean;\n}>`\n ${ellipsis()}\n border: 1px solid ${contents300};\n ${({ expandedDirection }) =>\n ({\n none: css`\n border-radius: 4px;\n `,\n above: css`\n border-radius: 0 0 4px 4px;\n border-top-color: transparent;\n `,\n below: css`\n border-radius: 4px 4px 0 0;\n border-bottom-color: transparent;\n `,\n })[expandedDirection ?? 'none']};\n\n padding: 10px 36px 10px 12px;\n transition: border-color 0.2s, background-color 0.2s;\n\n ${({ isPlaceholder }) =>\n isPlaceholder &&\n css`\n color: ${contents200};\n `}\n\n ${SelectContainer}:focus-within & {\n outline: none;\n border-color: ${contents000};\n }\n ${SelectContainer}:not([aria-disabled='true']) & {\n @media (hover: hover) {\n &:hover {\n background-color: ${bg200};\n }\n }\n\n &:active {\n background-color: ${bg300};\n }\n }\n`;\n\nexport const SelectDownIcon = styled.div`\n position: absolute;\n right: 12px;\n top: 50%;\n transform: translateY(-50%);\n\n & > svg {\n display: block;\n }\n\n pointer-events: none;\n`;\n\nexport const SelectOptionWrapper = styled.ul<{\n expandedDirection?: ExpandedType;\n maxHeight?: number | string;\n}>`\n all: unset;\n position: absolute;\n left: 0;\n right: 0;\n z-index: 1;\n border: 1px solid ${contents300};\n background-color: ${bg100};\n overflow-y:
|
|
1
|
+
{"version":3,"file":"styles.esm.js","sources":["../../../../../src/Inputs/Select/DesignedSelect/styles.ts"],"sourcesContent":["'use client';\n\nimport {\n bg100,\n bg200,\n bg300,\n contents000,\n contents200,\n contents300,\n ellipsis,\n} from '@remember-web/mixin';\nimport styled, { css } from 'styled-components';\n\nimport { SelectContainer } from '../styles';\nimport type { ExpandedType } from './types';\n\nexport const StyledSelect = styled.div<{\n expandedDirection?: ExpandedType;\n isPlaceholder?: boolean;\n}>`\n ${ellipsis()}\n border: 1px solid ${contents300};\n ${({ expandedDirection }) =>\n ({\n none: css`\n border-radius: 4px;\n `,\n above: css`\n border-radius: 0 0 4px 4px;\n border-top-color: transparent;\n `,\n below: css`\n border-radius: 4px 4px 0 0;\n border-bottom-color: transparent;\n `,\n })[expandedDirection ?? 'none']};\n\n padding: 10px 36px 10px 12px;\n transition: border-color 0.2s, background-color 0.2s;\n\n ${({ isPlaceholder }) =>\n isPlaceholder &&\n css`\n color: ${contents200};\n `}\n\n ${SelectContainer}:focus-within & {\n outline: none;\n border-color: ${contents000};\n }\n ${SelectContainer}:not([aria-disabled='true']) & {\n @media (hover: hover) {\n &:hover {\n background-color: ${bg200};\n }\n }\n\n &:active {\n background-color: ${bg300};\n }\n }\n`;\n\nexport const SelectDownIcon = styled.div`\n position: absolute;\n right: 12px;\n top: 50%;\n transform: translateY(-50%);\n\n & > svg {\n display: block;\n }\n\n pointer-events: none;\n`;\n\nexport const SelectOptionWrapper = styled.ul<{\n expandedDirection?: ExpandedType;\n maxHeight?: number | string;\n}>`\n all: unset;\n position: absolute;\n left: 0;\n right: 0;\n z-index: 1;\n border: 1px solid ${contents300};\n background-color: ${bg100};\n overflow-y: auto;\n overscroll-behavior: contain;\n transition: border-color 0.2s, background-color 0.2s;\n\n ${({ maxHeight }) => {\n if (!maxHeight) {\n return null;\n }\n\n if (typeof maxHeight === 'number') {\n return css`\n max-height: ${maxHeight}px;\n `;\n }\n\n return css`\n max-height: ${maxHeight};\n `;\n }};\n\n ${({ expandedDirection }) =>\n expandedDirection === 'below'\n ? css`\n top: calc(100% - 1px);\n border-top: none;\n border-radius: 0 0 4px 4px;\n `\n : css`\n bottom: calc(100% - 1px);\n border-bottom: none;\n border-radius: 4px 4px 0 0;\n `}\n\n ${SelectContainer}:focus &, ${SelectContainer}:focus-within & {\n outline: none;\n border-color: ${contents000};\n }\n`;\n\nexport const SelectOption = styled.li<{ isSelected?: boolean }>`\n ${ellipsis()}\n padding: 10px 12px;\n color: ${contents000};\n\n &[aria-disabled='true'] {\n color: ${contents300};\n }\n\n &:focus {\n background-color: ${bg200};\n outline: none;\n }\n\n ${({ isSelected }) =>\n isSelected &&\n css`\n background-color: ${bg200};\n `}\n`;\n"],"names":["below","SelectDownIcon"],"mappings":";;;;;;AAAa;AAgBN;AAMH;;;;AASEA;;AAI6B;AAK/B;;AAIC;AAmBQC;;AA4BU;;AAEjB;AACF;AAEA;;AAIA;;AAKF;AAEE;AAAoB;AAWf;AAQF;AAcH;;AAIC;;"}
|
|
@@ -7,7 +7,6 @@ var index$4 = require('./DesignedSelect/index.cjs.js');
|
|
|
7
7
|
var index$2 = require('./NativeSelect/index.cjs.js');
|
|
8
8
|
var index$3 = require('./NativeSelect/Option/index.cjs.js');
|
|
9
9
|
var index$1 = require('./Option/index.cjs.js');
|
|
10
|
-
var styles = require('./styles.cjs.js');
|
|
11
10
|
var jsxRuntime = require('react/jsx-runtime');
|
|
12
11
|
|
|
13
12
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
@@ -18,7 +17,6 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
|
|
|
18
17
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty__default.default(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
19
18
|
function Select(props, ref) {
|
|
20
19
|
var children = props.children,
|
|
21
|
-
label = props.label,
|
|
22
20
|
value = props.value,
|
|
23
21
|
className = props.className,
|
|
24
22
|
disabled = props.disabled,
|
|
@@ -28,49 +26,37 @@ function Select(props, ref) {
|
|
|
28
26
|
required = props.required,
|
|
29
27
|
onClick = props.onClick;
|
|
30
28
|
if (props["native"]) {
|
|
31
|
-
return /*#__PURE__*/jsxRuntime.
|
|
32
|
-
children: [label && /*#__PURE__*/jsxRuntime.jsxs(styles.SelectLabel, {
|
|
33
|
-
children: [label, required && /*#__PURE__*/jsxRuntime.jsx("mark", {
|
|
34
|
-
children: "*"
|
|
35
|
-
})]
|
|
36
|
-
}), /*#__PURE__*/jsxRuntime.jsx(index$2, {
|
|
37
|
-
disabled: disabled,
|
|
38
|
-
className: className,
|
|
39
|
-
onClick: onClick,
|
|
40
|
-
onChange: function onChange(e) {
|
|
41
|
-
_onChange === null || _onChange === void 0 || _onChange(e.target.value, e.target.innerText);
|
|
42
|
-
},
|
|
43
|
-
value: value,
|
|
44
|
-
required: required,
|
|
45
|
-
placeholder: placeholder,
|
|
46
|
-
width: width,
|
|
47
|
-
ref: ref,
|
|
48
|
-
children: react.Children.map(children, function (child) {
|
|
49
|
-
return /*#__PURE__*/jsxRuntime.jsx(index$3.NativeOption, _objectSpread({}, child.props));
|
|
50
|
-
})
|
|
51
|
-
})]
|
|
52
|
-
});
|
|
53
|
-
}
|
|
54
|
-
return /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
55
|
-
children: [label && /*#__PURE__*/jsxRuntime.jsxs(styles.SelectLabel, {
|
|
56
|
-
children: [label, required && /*#__PURE__*/jsxRuntime.jsx("mark", {
|
|
57
|
-
children: "*"
|
|
58
|
-
})]
|
|
59
|
-
}), /*#__PURE__*/jsxRuntime.jsx(index$4, {
|
|
60
|
-
className: className,
|
|
61
|
-
value: value,
|
|
29
|
+
return /*#__PURE__*/jsxRuntime.jsx(index$2, {
|
|
62
30
|
disabled: disabled,
|
|
31
|
+
className: className,
|
|
63
32
|
onClick: onClick,
|
|
64
|
-
onChange: function onChange(
|
|
65
|
-
|
|
33
|
+
onChange: function onChange(e) {
|
|
34
|
+
_onChange === null || _onChange === void 0 || _onChange(e.target.value, e.target.innerText);
|
|
66
35
|
},
|
|
36
|
+
value: value,
|
|
37
|
+
required: required,
|
|
67
38
|
placeholder: placeholder,
|
|
68
39
|
width: width,
|
|
69
|
-
maxHeight: props.maxHeight,
|
|
70
|
-
extendDirection: props.extendDirection,
|
|
71
40
|
ref: ref,
|
|
72
|
-
children: children
|
|
73
|
-
|
|
41
|
+
children: react.Children.map(children, function (child) {
|
|
42
|
+
return /*#__PURE__*/jsxRuntime.jsx(index$3.NativeOption, _objectSpread({}, child.props));
|
|
43
|
+
})
|
|
44
|
+
});
|
|
45
|
+
}
|
|
46
|
+
return /*#__PURE__*/jsxRuntime.jsx(index$4, {
|
|
47
|
+
className: className,
|
|
48
|
+
value: value,
|
|
49
|
+
disabled: disabled,
|
|
50
|
+
onClick: onClick,
|
|
51
|
+
onChange: function onChange(_value, _label) {
|
|
52
|
+
return _onChange === null || _onChange === void 0 ? void 0 : _onChange(_value, _label);
|
|
53
|
+
},
|
|
54
|
+
placeholder: placeholder,
|
|
55
|
+
width: width,
|
|
56
|
+
maxHeight: props.maxHeight,
|
|
57
|
+
extendDirection: props.extendDirection,
|
|
58
|
+
ref: ref,
|
|
59
|
+
children: children
|
|
74
60
|
});
|
|
75
61
|
}
|
|
76
62
|
var index = Object.assign( /*#__PURE__*/react.forwardRef(Select), {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs.js","sources":["../../../../src/Inputs/Select/index.tsx"],"sourcesContent":["'use client';\n\nimport type { Ref, RefAttributes } from 'react';\nimport { Children, forwardRef } from 'react';\n\nimport DesignedSelect from './DesignedSelect';\nimport NativeSelect from './NativeSelect';\nimport { NativeOption } from './NativeSelect/Option';\nimport { OptionHolder } from './Option';\nimport
|
|
1
|
+
{"version":3,"file":"index.cjs.js","sources":["../../../../src/Inputs/Select/index.tsx"],"sourcesContent":["'use client';\n\nimport type { Ref, RefAttributes } from 'react';\nimport { Children, forwardRef } from 'react';\n\nimport DesignedSelect from './DesignedSelect';\nimport NativeSelect from './NativeSelect';\nimport { NativeOption } from './NativeSelect/Option';\nimport { OptionHolder } from './Option';\nimport type {\n DesignedSelectProps,\n NativeSelectProps,\n SelectProps,\n SelectValue,\n} from './types';\n\nfunction Select<Value extends SelectValue>(\n props: SelectProps<Value>,\n ref: Ref<HTMLDivElement | HTMLSelectElement>\n) {\n const {\n children,\n value,\n className,\n disabled,\n onChange,\n placeholder,\n width,\n required,\n onClick,\n } = props;\n\n if (props.native) {\n return (\n <NativeSelect\n disabled={disabled}\n className={className}\n onClick={onClick}\n onChange={(e) => {\n onChange?.(e.target.value as Value, e.target.innerText);\n }}\n value={value}\n required={required}\n placeholder={placeholder}\n width={width}\n ref={ref as Ref<HTMLSelectElement>}\n >\n {Children.map(children, (child) => (\n <NativeOption {...child.props} />\n ))}\n </NativeSelect>\n );\n }\n\n return (\n <DesignedSelect\n className={className}\n value={value}\n disabled={disabled}\n onClick={onClick}\n onChange={(_value, _label) => onChange?.(_value as Value, _label)}\n placeholder={placeholder}\n width={width}\n maxHeight={props.maxHeight}\n extendDirection={props.extendDirection}\n ref={ref as Ref<HTMLDivElement>}\n >\n {children}\n </DesignedSelect>\n );\n}\n\nexport default Object.assign(\n forwardRef(Select) as <Value extends SelectValue>(\n props:\n | (DesignedSelectProps<Value> & RefAttributes<HTMLDivElement>)\n | (NativeSelectProps<Value> & RefAttributes<HTMLSelectElement>)\n ) => JSX.Element,\n { Option: OptionHolder }\n);\n"],"names":["disabled","className","onClick","onChange","value","required","placeholder","width","ref","children","Option"],"mappings":";;;;;;;;;;;;;;;AAAa;AAAA;AAgBb;AAIE;;;;;;;;;;;AAeMA;AACAC;AACAC;AACAC;AACEA;;AAEFC;AACAC;AACAC;AACAC;AACAC;;;;AAIE;AAGR;;AAIIP;AACAG;AACAJ;AACAE;AACAC;;;AACAG;AACAC;;;AAGAC;AAAgCC;AAEvB;AAGf;AAEA;AAMIC;AAAqB;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Inputs/Select/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAO,aAAa,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Inputs/Select/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAO,aAAa,EAAE,MAAM,OAAO,CAAC;AAOhD,OAAO,KAAK,EACV,mBAAmB,EACnB,iBAAiB,EAEjB,WAAW,EACZ,MAAM,SAAS,CAAC;4DA6DT,CAAC,oBAAoB,KAAK,CAAC,GAAG,cAAc,cAAc,CAAC,CAAC,GAC5D,CAAC,kBAAkB,KAAK,CAAC,GAAG,cAAc,iBAAiB,CAAC,CAAC,KAC9D,WAAW;;;;;;AALlB,wBAOE"}
|
|
@@ -5,14 +5,12 @@ import DesignedSelect from './DesignedSelect/index.esm.js';
|
|
|
5
5
|
import NativeSelect from './NativeSelect/index.esm.js';
|
|
6
6
|
import { NativeOption } from './NativeSelect/Option/index.esm.js';
|
|
7
7
|
import { OptionHolder } from './Option/index.esm.js';
|
|
8
|
-
import {
|
|
9
|
-
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
8
|
+
import { jsx } from 'react/jsx-runtime';
|
|
10
9
|
|
|
11
10
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
12
11
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
13
12
|
function Select(props, ref) {
|
|
14
13
|
var children = props.children,
|
|
15
|
-
label = props.label,
|
|
16
14
|
value = props.value,
|
|
17
15
|
className = props.className,
|
|
18
16
|
disabled = props.disabled,
|
|
@@ -22,49 +20,37 @@ function Select(props, ref) {
|
|
|
22
20
|
required = props.required,
|
|
23
21
|
onClick = props.onClick;
|
|
24
22
|
if (props["native"]) {
|
|
25
|
-
return /*#__PURE__*/
|
|
26
|
-
children: [label && /*#__PURE__*/jsxs(SelectLabel, {
|
|
27
|
-
children: [label, required && /*#__PURE__*/jsx("mark", {
|
|
28
|
-
children: "*"
|
|
29
|
-
})]
|
|
30
|
-
}), /*#__PURE__*/jsx(NativeSelect, {
|
|
31
|
-
disabled: disabled,
|
|
32
|
-
className: className,
|
|
33
|
-
onClick: onClick,
|
|
34
|
-
onChange: function onChange(e) {
|
|
35
|
-
_onChange === null || _onChange === void 0 || _onChange(e.target.value, e.target.innerText);
|
|
36
|
-
},
|
|
37
|
-
value: value,
|
|
38
|
-
required: required,
|
|
39
|
-
placeholder: placeholder,
|
|
40
|
-
width: width,
|
|
41
|
-
ref: ref,
|
|
42
|
-
children: Children.map(children, function (child) {
|
|
43
|
-
return /*#__PURE__*/jsx(NativeOption, _objectSpread({}, child.props));
|
|
44
|
-
})
|
|
45
|
-
})]
|
|
46
|
-
});
|
|
47
|
-
}
|
|
48
|
-
return /*#__PURE__*/jsxs("div", {
|
|
49
|
-
children: [label && /*#__PURE__*/jsxs(SelectLabel, {
|
|
50
|
-
children: [label, required && /*#__PURE__*/jsx("mark", {
|
|
51
|
-
children: "*"
|
|
52
|
-
})]
|
|
53
|
-
}), /*#__PURE__*/jsx(DesignedSelect, {
|
|
54
|
-
className: className,
|
|
55
|
-
value: value,
|
|
23
|
+
return /*#__PURE__*/jsx(NativeSelect, {
|
|
56
24
|
disabled: disabled,
|
|
25
|
+
className: className,
|
|
57
26
|
onClick: onClick,
|
|
58
|
-
onChange: function onChange(
|
|
59
|
-
|
|
27
|
+
onChange: function onChange(e) {
|
|
28
|
+
_onChange === null || _onChange === void 0 || _onChange(e.target.value, e.target.innerText);
|
|
60
29
|
},
|
|
30
|
+
value: value,
|
|
31
|
+
required: required,
|
|
61
32
|
placeholder: placeholder,
|
|
62
33
|
width: width,
|
|
63
|
-
maxHeight: props.maxHeight,
|
|
64
|
-
extendDirection: props.extendDirection,
|
|
65
34
|
ref: ref,
|
|
66
|
-
children: children
|
|
67
|
-
|
|
35
|
+
children: Children.map(children, function (child) {
|
|
36
|
+
return /*#__PURE__*/jsx(NativeOption, _objectSpread({}, child.props));
|
|
37
|
+
})
|
|
38
|
+
});
|
|
39
|
+
}
|
|
40
|
+
return /*#__PURE__*/jsx(DesignedSelect, {
|
|
41
|
+
className: className,
|
|
42
|
+
value: value,
|
|
43
|
+
disabled: disabled,
|
|
44
|
+
onClick: onClick,
|
|
45
|
+
onChange: function onChange(_value, _label) {
|
|
46
|
+
return _onChange === null || _onChange === void 0 ? void 0 : _onChange(_value, _label);
|
|
47
|
+
},
|
|
48
|
+
placeholder: placeholder,
|
|
49
|
+
width: width,
|
|
50
|
+
maxHeight: props.maxHeight,
|
|
51
|
+
extendDirection: props.extendDirection,
|
|
52
|
+
ref: ref,
|
|
53
|
+
children: children
|
|
68
54
|
});
|
|
69
55
|
}
|
|
70
56
|
var index = Object.assign( /*#__PURE__*/forwardRef(Select), {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.esm.js","sources":["../../../../src/Inputs/Select/index.tsx"],"sourcesContent":["'use client';\n\nimport type { Ref, RefAttributes } from 'react';\nimport { Children, forwardRef } from 'react';\n\nimport DesignedSelect from './DesignedSelect';\nimport NativeSelect from './NativeSelect';\nimport { NativeOption } from './NativeSelect/Option';\nimport { OptionHolder } from './Option';\nimport
|
|
1
|
+
{"version":3,"file":"index.esm.js","sources":["../../../../src/Inputs/Select/index.tsx"],"sourcesContent":["'use client';\n\nimport type { Ref, RefAttributes } from 'react';\nimport { Children, forwardRef } from 'react';\n\nimport DesignedSelect from './DesignedSelect';\nimport NativeSelect from './NativeSelect';\nimport { NativeOption } from './NativeSelect/Option';\nimport { OptionHolder } from './Option';\nimport type {\n DesignedSelectProps,\n NativeSelectProps,\n SelectProps,\n SelectValue,\n} from './types';\n\nfunction Select<Value extends SelectValue>(\n props: SelectProps<Value>,\n ref: Ref<HTMLDivElement | HTMLSelectElement>\n) {\n const {\n children,\n value,\n className,\n disabled,\n onChange,\n placeholder,\n width,\n required,\n onClick,\n } = props;\n\n if (props.native) {\n return (\n <NativeSelect\n disabled={disabled}\n className={className}\n onClick={onClick}\n onChange={(e) => {\n onChange?.(e.target.value as Value, e.target.innerText);\n }}\n value={value}\n required={required}\n placeholder={placeholder}\n width={width}\n ref={ref as Ref<HTMLSelectElement>}\n >\n {Children.map(children, (child) => (\n <NativeOption {...child.props} />\n ))}\n </NativeSelect>\n );\n }\n\n return (\n <DesignedSelect\n className={className}\n value={value}\n disabled={disabled}\n onClick={onClick}\n onChange={(_value, _label) => onChange?.(_value as Value, _label)}\n placeholder={placeholder}\n width={width}\n maxHeight={props.maxHeight}\n extendDirection={props.extendDirection}\n ref={ref as Ref<HTMLDivElement>}\n >\n {children}\n </DesignedSelect>\n );\n}\n\nexport default Object.assign(\n forwardRef(Select) as <Value extends SelectValue>(\n props:\n | (DesignedSelectProps<Value> & RefAttributes<HTMLDivElement>)\n | (NativeSelectProps<Value> & RefAttributes<HTMLSelectElement>)\n ) => JSX.Element,\n { Option: OptionHolder }\n);\n"],"names":["disabled","className","onClick","onChange","value","required","placeholder","width","ref","children","Option"],"mappings":";;;;;;;;;AAAa;AAAA;AAgBb;AAIE;;;;;;;;;;;AAeMA;AACAC;AACAC;AACAC;AACEA;;AAEFC;AACAC;AACAC;AACAC;AACAC;;;;AAIE;AAGR;;AAIIP;AACAG;AACAJ;AACAE;AACAC;;;AACAG;AACAC;;;AAGAC;AAAgCC;AAEvB;AAGf;AAEA;AAMIC;AAAqB;;"}
|
|
@@ -10,7 +10,7 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
|
10
10
|
var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefault(_taggedTemplateLiteral);
|
|
11
11
|
var styled__default = /*#__PURE__*/_interopDefault(styled);
|
|
12
12
|
|
|
13
|
-
var _templateObject
|
|
13
|
+
var _templateObject;
|
|
14
14
|
var SelectContainer = styled__default.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n ", "\n color: ", ";\n width: ", ";\n position: relative;\n user-select: none;\n\n &:focus {\n outline: none;\n border-color: ", ";\n }\n &[aria-disabled='true'] {\n color: ", ";\n border-color: ", ";\n background-color: ", ";\n }\n"])), mixin.getTypographyStyles('UIBody2'), mixin.contents000, function (_ref) {
|
|
15
15
|
var $width = _ref.$width;
|
|
16
16
|
if (!$width) {
|
|
@@ -21,8 +21,6 @@ var SelectContainer = styled__default.default.div(_templateObject || (_templateO
|
|
|
21
21
|
}
|
|
22
22
|
return $width;
|
|
23
23
|
}, mixin.contents000, mixin.contents200, mixin.contents300, mixin.bg200);
|
|
24
|
-
var SelectLabel = styled__default.default.label(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default.default(["\n ", "\n display: block;\n margin-bottom: 12px;\n display: flex;\n align-items: center;\n gap: 4px;\n\n & > mark {\n all: unset;\n color: ", ";\n }\n"])), mixin.getTypographyStyles('Title2'), mixin.roleRed);
|
|
25
24
|
|
|
26
25
|
exports.SelectContainer = SelectContainer;
|
|
27
|
-
exports.SelectLabel = SelectLabel;
|
|
28
26
|
//# sourceMappingURL=styles.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.cjs.js","sources":["../../../../src/Inputs/Select/styles.ts"],"sourcesContent":["'use client';\n\nimport {\n bg200,\n contents000,\n contents200,\n contents300,\n getTypographyStyles,\n
|
|
1
|
+
{"version":3,"file":"styles.cjs.js","sources":["../../../../src/Inputs/Select/styles.ts"],"sourcesContent":["'use client';\n\nimport {\n bg200,\n contents000,\n contents200,\n contents300,\n getTypographyStyles,\n} from '@remember-web/mixin';\nimport styled from 'styled-components';\n\nexport const SelectContainer = styled.div<{ $width?: number | string }>`\n ${getTypographyStyles('UIBody2')}\n color: ${contents000};\n width: ${({ $width }) => {\n if (!$width) {\n return 'fit-content';\n }\n\n if (typeof $width === 'number') {\n return `${$width}px`;\n }\n\n return $width;\n }};\n position: relative;\n user-select: none;\n\n &:focus {\n outline: none;\n border-color: ${contents000};\n }\n &[aria-disabled='true'] {\n color: ${contents200};\n border-color: ${contents300};\n background-color: ${bg200};\n }\n`;\n"],"names":[],"mappings":";;;;;;;;;;;;AAAa;AAWN;AAGoB;;AAErB;AACF;AAEA;;AAEA;AAEA;AACF;;"}
|
|
@@ -2,5 +2,4 @@
|
|
|
2
2
|
export declare const SelectContainer: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
|
|
3
3
|
$width?: string | number | undefined;
|
|
4
4
|
}>>;
|
|
5
|
-
export declare const SelectLabel: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>>;
|
|
6
5
|
//# sourceMappingURL=styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/Inputs/Select/styles.ts"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/Inputs/Select/styles.ts"],"names":[],"mappings":";AAWA,eAAO,MAAM,eAAe;;GA0B3B,CAAC"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
|
|
3
|
-
import { getTypographyStyles, contents000, contents200, contents300, bg200
|
|
3
|
+
import { getTypographyStyles, contents000, contents200, contents300, bg200 } from '@remember-web/mixin';
|
|
4
4
|
import styled from 'styled-components';
|
|
5
5
|
|
|
6
|
-
var _templateObject
|
|
6
|
+
var _templateObject;
|
|
7
7
|
var SelectContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n ", "\n color: ", ";\n width: ", ";\n position: relative;\n user-select: none;\n\n &:focus {\n outline: none;\n border-color: ", ";\n }\n &[aria-disabled='true'] {\n color: ", ";\n border-color: ", ";\n background-color: ", ";\n }\n"])), getTypographyStyles('UIBody2'), contents000, function (_ref) {
|
|
8
8
|
var $width = _ref.$width;
|
|
9
9
|
if (!$width) {
|
|
@@ -14,7 +14,6 @@ var SelectContainer = styled.div(_templateObject || (_templateObject = _taggedTe
|
|
|
14
14
|
}
|
|
15
15
|
return $width;
|
|
16
16
|
}, contents000, contents200, contents300, bg200);
|
|
17
|
-
var SelectLabel = styled.label(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n ", "\n display: block;\n margin-bottom: 12px;\n display: flex;\n align-items: center;\n gap: 4px;\n\n & > mark {\n all: unset;\n color: ", ";\n }\n"])), getTypographyStyles('Title2'), roleRed);
|
|
18
17
|
|
|
19
|
-
export { SelectContainer
|
|
18
|
+
export { SelectContainer };
|
|
20
19
|
//# sourceMappingURL=styles.esm.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.esm.js","sources":["../../../../src/Inputs/Select/styles.ts"],"sourcesContent":["'use client';\n\nimport {\n bg200,\n contents000,\n contents200,\n contents300,\n getTypographyStyles,\n
|
|
1
|
+
{"version":3,"file":"styles.esm.js","sources":["../../../../src/Inputs/Select/styles.ts"],"sourcesContent":["'use client';\n\nimport {\n bg200,\n contents000,\n contents200,\n contents300,\n getTypographyStyles,\n} from '@remember-web/mixin';\nimport styled from 'styled-components';\n\nexport const SelectContainer = styled.div<{ $width?: number | string }>`\n ${getTypographyStyles('UIBody2')}\n color: ${contents000};\n width: ${({ $width }) => {\n if (!$width) {\n return 'fit-content';\n }\n\n if (typeof $width === 'number') {\n return `${$width}px`;\n }\n\n return $width;\n }};\n position: relative;\n user-select: none;\n\n &:focus {\n outline: none;\n border-color: ${contents000};\n }\n &[aria-disabled='true'] {\n color: ${contents200};\n border-color: ${contents300};\n background-color: ${bg200};\n }\n`;\n"],"names":[],"mappings":";;;;;AAAa;AAWN;AAGoB;;AAErB;AACF;AAEA;;AAEA;AAEA;AACF;;"}
|
|
@@ -9,10 +9,6 @@ export type SelectBaseProps<Value extends SelectValue> = {
|
|
|
9
9
|
className?: string;
|
|
10
10
|
disabled?: boolean;
|
|
11
11
|
error?: boolean;
|
|
12
|
-
/**
|
|
13
|
-
* @deprecated Label 컴포넌트를 사용해 주세요.
|
|
14
|
-
*/
|
|
15
|
-
label?: ReactNode;
|
|
16
12
|
required?: boolean;
|
|
17
13
|
value?: Value;
|
|
18
14
|
placeholder?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/Inputs/Select/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAE7C,MAAM,MAAM,iBAAiB,CAAC,KAAK,SAAS,WAAW,IAAI,YAAY,CACrE,WAAW,CAAC,KAAK,CAAC,EAClB,OAAO,YAAY,CACpB,CAAC;AAEF,KAAK,eAAe,CAAC,KAAK,SAAS,WAAW,IAAI;IAChD,QAAQ,EAAE,iBAAiB,CAAC,KAAK,CAAC,GAAG,iBAAiB,CAAC,KAAK,CAAC,EAAE,CAAC;CACjE,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;AAEtD,MAAM,MAAM,eAAe,CAAC,KAAK,SAAS,WAAW,IAAI;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/Inputs/Select/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAE7C,MAAM,MAAM,iBAAiB,CAAC,KAAK,SAAS,WAAW,IAAI,YAAY,CACrE,WAAW,CAAC,KAAK,CAAC,EAClB,OAAO,YAAY,CACpB,CAAC;AAEF,KAAK,eAAe,CAAC,KAAK,SAAS,WAAW,IAAI;IAChD,QAAQ,EAAE,iBAAiB,CAAC,KAAK,CAAC,GAAG,iBAAiB,CAAC,KAAK,CAAC,EAAE,CAAC;CACjE,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;AAEtD,MAAM,MAAM,eAAe,CAAC,KAAK,SAAS,WAAW,IAAI;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,CACT,WAAW,EAAE,KAAK,EAClB,WAAW,EAAE,SAAS,KACnB,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;CAChD,CAAC;AAEF,MAAM,MAAM,mBAAmB,CAAC,KAAK,SAAS,WAAW,IACvD,eAAe,CAAC,KAAK,CAAC,GAAG;IACvB,MAAM,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;CACrC,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC;AAE7B,MAAM,MAAM,iBAAiB,CAAC,KAAK,SAAS,WAAW,IACrD,eAAe,CAAC,KAAK,CAAC,GAAG;IACvB,MAAM,EAAE,IAAI,CAAC;CACd,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC;AAE7B,MAAM,MAAM,WAAW,CAAC,KAAK,SAAS,WAAW,IAC7C,mBAAmB,CAAC,KAAK,CAAC,GAC1B,iBAAiB,CAAC,KAAK,CAAC,CAAC;AAE7B,MAAM,MAAM,WAAW,CAAC,KAAK,SAAS,WAAW,IAAI;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@remember-web/primitive",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.1",
|
|
4
4
|
"description": "Remember Web Primitive Components",
|
|
5
5
|
"homepage": "https://dramancompany.github.io/remember-web-packages/",
|
|
6
6
|
"author": "Remember",
|
|
@@ -41,12 +41,13 @@
|
|
|
41
41
|
"@radix-ui/react-separator": "^1.0.3",
|
|
42
42
|
"@radix-ui/react-switch": "^1.0.3",
|
|
43
43
|
"@radix-ui/react-tooltip": "^1.0.7",
|
|
44
|
-
"@remember-web/icon": "^0.
|
|
44
|
+
"@remember-web/icon": "^0.2.0",
|
|
45
45
|
"@remember-web/mixin": "^0.2.6",
|
|
46
46
|
"@remember-web/shared": "^0.1.1"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
49
|
"@babel/core": "^7.24.4",
|
|
50
|
+
"@babel/plugin-transform-optional-chaining": "^7.25.9",
|
|
50
51
|
"@babel/plugin-transform-runtime": "^7.24.3",
|
|
51
52
|
"@babel/preset-env": "^7.24.4",
|
|
52
53
|
"@babel/preset-react": "^7.24.1",
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { PopoverContent, PopoverContentProps } from '@radix-ui/react-popover';
|
|
2
2
|
import { bg100, contents000 } from '@remember-web/mixin';
|
|
3
|
-
import { CSSProperties } from 'react';
|
|
3
|
+
import type { CSSProperties } from 'react';
|
|
4
4
|
import styled, { css, keyframes } from 'styled-components';
|
|
5
5
|
|
|
6
6
|
export const showFadeIn = keyframes`
|
|
@@ -20,11 +20,13 @@ export const showFadeOut = keyframes`
|
|
|
20
20
|
}
|
|
21
21
|
`;
|
|
22
22
|
|
|
23
|
-
export const StyledPopoverContentWrapper = styled.div<{
|
|
23
|
+
export const StyledPopoverContentWrapper = styled.div<{
|
|
24
|
+
$zIndex?: CSSProperties['zIndex'];
|
|
25
|
+
}>`
|
|
24
26
|
[data-radix-popper-content-wrapper]{
|
|
25
|
-
${({$zIndex}) => $zIndex && css` z-index: ${$zIndex} !important; `}
|
|
27
|
+
${({ $zIndex }) => $zIndex && css` z-index: ${$zIndex} !important; `}
|
|
26
28
|
}
|
|
27
|
-
|
|
29
|
+
`;
|
|
28
30
|
|
|
29
31
|
export const StyledPopoverContent = styled(PopoverContent)`
|
|
30
32
|
contain: paint;
|
|
@@ -85,7 +85,7 @@ export const SelectOptionWrapper = styled.ul<{
|
|
|
85
85
|
z-index: 1;
|
|
86
86
|
border: 1px solid ${contents300};
|
|
87
87
|
background-color: ${bg100};
|
|
88
|
-
overflow-y:
|
|
88
|
+
overflow-y: auto;
|
|
89
89
|
overscroll-behavior: contain;
|
|
90
90
|
transition: border-color 0.2s, background-color 0.2s;
|
|
91
91
|
|
|
@@ -7,7 +7,6 @@ import DesignedSelect from './DesignedSelect';
|
|
|
7
7
|
import NativeSelect from './NativeSelect';
|
|
8
8
|
import { NativeOption } from './NativeSelect/Option';
|
|
9
9
|
import { OptionHolder } from './Option';
|
|
10
|
-
import { SelectLabel } from './styles';
|
|
11
10
|
import type {
|
|
12
11
|
DesignedSelectProps,
|
|
13
12
|
NativeSelectProps,
|
|
@@ -21,7 +20,6 @@ function Select<Value extends SelectValue>(
|
|
|
21
20
|
) {
|
|
22
21
|
const {
|
|
23
22
|
children,
|
|
24
|
-
label,
|
|
25
23
|
value,
|
|
26
24
|
className,
|
|
27
25
|
disabled,
|
|
@@ -34,57 +32,41 @@ function Select<Value extends SelectValue>(
|
|
|
34
32
|
|
|
35
33
|
if (props.native) {
|
|
36
34
|
return (
|
|
37
|
-
<
|
|
38
|
-
{label && (
|
|
39
|
-
<SelectLabel>
|
|
40
|
-
{label}
|
|
41
|
-
{required && <mark>*</mark>}
|
|
42
|
-
</SelectLabel>
|
|
43
|
-
)}
|
|
44
|
-
<NativeSelect
|
|
45
|
-
disabled={disabled}
|
|
46
|
-
className={className}
|
|
47
|
-
onClick={onClick}
|
|
48
|
-
onChange={(e) => {
|
|
49
|
-
onChange?.(e.target.value as Value, e.target.innerText);
|
|
50
|
-
}}
|
|
51
|
-
value={value}
|
|
52
|
-
required={required}
|
|
53
|
-
placeholder={placeholder}
|
|
54
|
-
width={width}
|
|
55
|
-
ref={ref as Ref<HTMLSelectElement>}
|
|
56
|
-
>
|
|
57
|
-
{Children.map(children, (child) => (
|
|
58
|
-
<NativeOption {...child.props} />
|
|
59
|
-
))}
|
|
60
|
-
</NativeSelect>
|
|
61
|
-
</div>
|
|
62
|
-
);
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
return (
|
|
66
|
-
<div>
|
|
67
|
-
{label && (
|
|
68
|
-
<SelectLabel>
|
|
69
|
-
{label}
|
|
70
|
-
{required && <mark>*</mark>}
|
|
71
|
-
</SelectLabel>
|
|
72
|
-
)}
|
|
73
|
-
<DesignedSelect
|
|
74
|
-
className={className}
|
|
75
|
-
value={value}
|
|
35
|
+
<NativeSelect
|
|
76
36
|
disabled={disabled}
|
|
37
|
+
className={className}
|
|
77
38
|
onClick={onClick}
|
|
78
|
-
onChange={(
|
|
39
|
+
onChange={(e) => {
|
|
40
|
+
onChange?.(e.target.value as Value, e.target.innerText);
|
|
41
|
+
}}
|
|
42
|
+
value={value}
|
|
43
|
+
required={required}
|
|
79
44
|
placeholder={placeholder}
|
|
80
45
|
width={width}
|
|
81
|
-
|
|
82
|
-
extendDirection={props.extendDirection}
|
|
83
|
-
ref={ref as Ref<HTMLDivElement>}
|
|
46
|
+
ref={ref as Ref<HTMLSelectElement>}
|
|
84
47
|
>
|
|
85
|
-
{children
|
|
86
|
-
|
|
87
|
-
|
|
48
|
+
{Children.map(children, (child) => (
|
|
49
|
+
<NativeOption {...child.props} />
|
|
50
|
+
))}
|
|
51
|
+
</NativeSelect>
|
|
52
|
+
);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
return (
|
|
56
|
+
<DesignedSelect
|
|
57
|
+
className={className}
|
|
58
|
+
value={value}
|
|
59
|
+
disabled={disabled}
|
|
60
|
+
onClick={onClick}
|
|
61
|
+
onChange={(_value, _label) => onChange?.(_value as Value, _label)}
|
|
62
|
+
placeholder={placeholder}
|
|
63
|
+
width={width}
|
|
64
|
+
maxHeight={props.maxHeight}
|
|
65
|
+
extendDirection={props.extendDirection}
|
|
66
|
+
ref={ref as Ref<HTMLDivElement>}
|
|
67
|
+
>
|
|
68
|
+
{children}
|
|
69
|
+
</DesignedSelect>
|
|
88
70
|
);
|
|
89
71
|
}
|
|
90
72
|
|
|
@@ -6,7 +6,6 @@ import {
|
|
|
6
6
|
contents200,
|
|
7
7
|
contents300,
|
|
8
8
|
getTypographyStyles,
|
|
9
|
-
roleRed,
|
|
10
9
|
} from '@remember-web/mixin';
|
|
11
10
|
import styled from 'styled-components';
|
|
12
11
|
|
|
@@ -37,17 +36,3 @@ export const SelectContainer = styled.div<{ $width?: number | string }>`
|
|
|
37
36
|
background-color: ${bg200};
|
|
38
37
|
}
|
|
39
38
|
`;
|
|
40
|
-
|
|
41
|
-
export const SelectLabel = styled.label`
|
|
42
|
-
${getTypographyStyles('Title2')}
|
|
43
|
-
display: block;
|
|
44
|
-
margin-bottom: 12px;
|
|
45
|
-
display: flex;
|
|
46
|
-
align-items: center;
|
|
47
|
-
gap: 4px;
|
|
48
|
-
|
|
49
|
-
& > mark {
|
|
50
|
-
all: unset;
|
|
51
|
-
color: ${roleRed};
|
|
52
|
-
}
|
|
53
|
-
`;
|
|
@@ -17,10 +17,6 @@ export type SelectBaseProps<Value extends SelectValue> = {
|
|
|
17
17
|
className?: string;
|
|
18
18
|
disabled?: boolean;
|
|
19
19
|
error?: boolean;
|
|
20
|
-
/**
|
|
21
|
-
* @deprecated Label 컴포넌트를 사용해 주세요.
|
|
22
|
-
*/
|
|
23
|
-
label?: ReactNode;
|
|
24
20
|
required?: boolean;
|
|
25
21
|
// TODO: children의 prop에 따라 결정되는 제네릭 구현이 필요 infer를 활용하면 될 것 같기도 한데 추후 확인
|
|
26
22
|
value?: Value;
|